<template>
    <el-dialog @open="open"  @closed="closed" v-model="props.isOpen" :title="props.openType==='add'?'添加菜单':'修改菜单'"
               @close="close" style="width: 30%;min-width: 400px">
            <el-form ref="dataForm" :rules="rules" v-loading="loading" :model="form" label-width="100px" align="center">
                <el-form-item label="菜单名" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="路径" prop="path">
                    <el-input v-model="form.path" />
                </el-form-item>

                <el-form-item label="组件名" v-if='form.nodeType==2' prop="viewName">
                    <el-input v-model="form.viewName" />
                </el-form-item>

                <el-form-item label="图标" v-show='form.nodeType!==3'>
                    <el-dropdown trigger="click" max-height="200px">
                        <span class="el-dropdown-link">
                           <el-icon size="20px" v-if="form.icon"><component :is="form.icon"></component></el-icon>
                            <span v-else>选择图标</span>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in icons" @click="selectIcon(item)">
                                    <el-icon size="20px"><component :is="item"></component></el-icon>{{item}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-form-item>

                <div v-show='props.openType=="add"'>
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="form.nodeType">
                            <el-radio :label="1">一级菜单</el-radio>
                            <el-radio :label="2">二级菜单</el-radio>
                            <el-radio :label="3">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item  label="选择父节点" v-if="form.nodeType!=1">
                        <el-tree-select
                                v-model="form.parentName"
                                :data="parentTree"
                                check-strictly
                                :render-after-expand="false"
                                @node-click="handleNodeClick"
                        />
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button v-show='props.openType=="add"' type="primary"  @click="addMunu">添加</el-button>
                    <el-button v-show='props.openType=="add"' type="warning"  @click="reset">重置</el-button>
                    <el-button v-show="props.openType=='edit'" type="success"  @click="updateMunu">更新</el-button>
                    <el-button @click="close" type="primary" >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,nextTick} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])
    const icons = ref(['Setting','Document','Bell','PieChart','Stopwatch','Notebook','ShoppingCart',
        'Goods','CreditCard','Money','User','Filter','EditPen','Headset','Box','Mouse','Magnet','Coin',
        'Trophy','Timer','Picture','SetUp','Operation','Connection','Discount','Position'])
    let dataForm = ref(null)
    let props = defineProps(['openType','isOpen','id'])
    let openModMenu = ref(false)
    let loading = ref(true)
    let form = reactive({})
    const rules = reactive({
        name: [{ required: true, message: '请输入菜单名', trigger: 'blur' },],
        path: [{required: true,message: '请输入路径', trigger: 'blur'},],
        viewName: [{required: true,message: '请输入组件名', trigger: 'blur'},],
    })
    const defaultProps = {
        children: 'children',
        label: 'name',
        id:"id"
    }
    let parentTree = reactive([])

    function open() {
        if(props.openType==='edit'){
            request.get(`/api/menu/getMenu/${props.id}`).then(resp => {
                for(let key in resp){
                     form[key] = resp[key]
                }
                nextTick(function(){
                    loading.value = false
                })
            })
        }else if(props.openType==="add"){
            loading.value = false
            for(let key in form){
                delete form[key]
            }
         }
        request.get(`/api/menu/getParentMenus`).then(resp => {
            parentTree.splice(0, parentTree.length)
            parentTree.push(...resp)
        })
    }

    function close(){
        emits("close")
        dataForm.value.resetFields()//重置表单校验
    }
    function reset(){
        for(let key in form){
            delete form[key]
        }
    }
    function closed(){
        for(let key in form){
            delete form[key]
        }
    }

    function addMunu(){
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/menu/add", form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })

            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateMunu(){
        dataForm.value.validate((valid, fields) => {
            if (valid) {
                request.post("/api/menu/update", form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }

    function handleNodeClick (node){
        if(form.nodeType===2){// 类型为二级菜单
            if(node.level!==1){
                ElMessage({message: '二级菜单父节点必须为一级菜单！',type: 'error'})
                nextTick(()=>{
                    form.parentId = null
                    form.parentName = null
                    form.parentFullId= null
                })
            }else{
                form.parentId = node.value
                form.parentName = node.label
                form.parentFullId= node.parentFullId+node.value
            }
        }else if(form.nodeType===3){// 类型为按钮
            if(node.level!==2){
                ElMessage({message: '按钮父节点必须为二级菜单！',type: 'error'})
                nextTick(()=>{
                    form.parentId = null
                    form.parentName = null
                    form.parentFullId= null
                })
            }else{
                form.parentId = node.value
                form.parentName = node.label
                form.parentFullId= node.parentFullId+node.value
            }
        }else{
            nextTick(()=>{
                form.parentId = null
                form.parentName = null
                form.parentFullId= null
            })
            ElMessage({message: '请选择菜单类型！',type: 'error'})
        }
    }
    function selectIcon (iconName){
        form.icon = iconName
    }
</script>

<style scoped>

</style>